<template>
  <MapBase @map-initialized="initializeZoomHandler" :layers="[clusterLayer, pointLayer]" />
</template>

<script setup>
import MapBase from "../MapBase.vue";
import { Vector as VectorLayer } from "ol/layer";
import { Vector as VectorSource, Cluster } from "ol/source";
import buildingData from "../data/heatMapData.json";
import GeoJSON from "ol/format/GeoJSON";
import { getCenter } from "ol/extent";
import { Point } from "ol/geom";
import { Style, Circle, Fill, Stroke, Text } from "ol/style";

// 提取点数据
const features = new GeoJSON().readFeatures(buildingData, {
  dataProjection: "EPSG:4326",
  featureProjection: "EPSG:4326",
});

// 将多边形转化为中心点
const pointFeatures = features.map((feature) => {
  const geometry = feature.getGeometry();
  const center =
    geometry.getType() === "Polygon"
      ? getCenter(geometry.getExtent()) // 获取多边形中心点
      : geometry.getCoordinates(); // 如果已经是点数据，直接使用

  // 创建新的点要素
  const pointFeature = feature.clone(); // 克隆原有特性
  pointFeature.setGeometry(new Point(center)); // 替换为点
  pointFeature.set("buildingName", feature.get("name")); // 设置建筑名称
  return pointFeature;
});

// 创建点图数据源
const pointVectorSource = new VectorSource({
  features: pointFeatures,
});

// 创建聚合数据源
const clusterSource = new Cluster({
  distance: 40, // 聚合半径（像素单位）
  source: pointVectorSource,
});

// 创建聚合图层
const clusterLayer = new VectorLayer({
  source: clusterSource,
  visible: true, // 初始设置为可见
  style: (feature) => {
    const size = feature.get("features").length; // 聚合点数量
    let color = size > 10 ? "#FF5722" : "#26C6DA"; // 根据数量改变颜色
    return new Style({
      image: new Circle({
        radius: Math.min(size * 2, 15), // 半径随着数量变化，限制最大值
        fill: new Fill({
          color,
        }),
        stroke: new Stroke({
          color: "#FFFFFF",
          width: 1,
        }),
      }),
      text: new Text({
        text: size > 1 ? size.toString() : "", // 显示点数
        fill: new Fill({
          color: "#FFF",
        }),
        stroke: new Stroke({
          color: "#000",
          width: 2,
        }),
      }),
    });
  },
});

// 创建原始点图层（仅在高缩放级别可见）
const pointLayer = new VectorLayer({
  source: pointVectorSource,
  visible: false, // 初始设置为不可见
  style: (feature) => {
    const name = feature.get("buildingName") || "未命名";
    return new Style({
      image: new Circle({
        radius: 5, // 点的大小
        fill: new Fill({
          color: "#FF5722", // 填充颜色
        }),
        stroke: new Stroke({
          color: "#FFFFFF", // 边框颜色
          width: 1,
        }),
      }),
      text: new Text({
        text: name, // 显示名称
        offsetY: -10, // 偏移量
        fill: new Fill({
          color: "#000", // 文字颜色
        }),
        stroke: new Stroke({
          color: "#FFF", // 文字边框
          width: 2,
        }),
      }),
    });
  },
});

// 缩放级别处理
const handleZoomLevel = (map) => {
  const zoom = map.getView().getZoom();
  if (zoom >= 12) {
    pointLayer.setVisible(true); // 高缩放级别显示详细点图层
    clusterLayer.setVisible(false); // 隐藏聚合图层
  } else {
    pointLayer.setVisible(false); // 低缩放级别隐藏详细点图层
    clusterLayer.setVisible(true); // 显示聚合图层
  }
};

// 初始化地图缩放监听
const initializeZoomHandler = (map) => {
  map.on("moveend", () => {
    handleZoomLevel(map);
  });
  handleZoomLevel(map); // 初次设置图层可见性
};
</script>
